<template>
	<view style="padding: 30rpx;">
		<!-- <view style="background-color: #fff;border-radius: 16rpx;">
			<u-cell-item :arrow="false" v-for="(item,index) in carLit" :key="index" :title="item.plate" :label="'承重：'+item.carLoadBearing+' 吨'" @click="toDetail(item.id)">
				
			</u-cell-item>
			</view> -->
		<view v-for="(item,index) in carLit" :key="index" @click="toDetail(item.id)"
			style="padding: 30rpx;background-color: #fff;border-radius: 16rpx;margin-bottom: 20rpx;">
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<view style="width: 100%;">
					<view style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
						<view style="font-size: 32rpx;">{{item.plate}}</view>
						<view>
							<view v-if="item.carUsageStatus == 0" style="color: green;">空闲中</view>
							<view v-if="item.carUsageStatus == 1" style="color: red;">工作中</view>
						</view>
					</view>
					<view style="margin-top: 20rpx;">
						<text>承重：</text>
						<text style="margin-left: 5rpx;color: #999;">{{item.carLoadBearing}} 吨</text>
					</view>
				</view>
				<view style="margin-left: 20rpx;">
					<image :src="item.cargoBoxPhotoAttachment" style="height: 120rpx;width: 120rpx;"></image>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				carLit: [],
				plate: '',
				pageSize: 10,
				pageNum: 1,
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData() {
				this.$u.get("/driver/vehicleInfoPage", {
					// 'carUsageStatus': this.sysConstant.IDLE_CAR_USAGE_STATUS,
					'plate': this.plate,
					// 'pageNum': this.pageNum,
					// 'pageSize': this.pageSize
				}).then(res => {
					if (res.code === 200) {
						this.carLit = res.rows
					}
				})
			},

			toDetail(id) {
				uni.navigateTo({
					url: "/pages/index/car/car-detail/car-detail?carId=" + id
				})
			}
		}
	}
</script>

<style>

</style>